1 files changed, 58 insertions, 42 deletions
diff --git a/front-end/src/views/Account/[comp].vue b/front-end/src/views/Account/[comp].vue
index d4f1c4d..713a6fe 100644
--- a/front-end/src/views/Account/[comp].vue
+++ b/front-end/src/views/Account/[comp].vue
@@ -1,3 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { get, set } from '@vueuse/core'
+import { useRouteParams } from '@vueuse/router'
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import { useStore } from '../../store'
+import Settings from './components/settings/Settings.vue'
+import Profile from './components/profile/Profile.vue'
+import OauthApps from './components/oauth/Oauth.vue'
+
+const store = useStore()
+store.setPageTitle('Account')
+
+const oauthEnabled = computed(() => store.oauth2?.apps);
+
+type ComponentType = 'profile' | 'oauth' | 'settings' | ''
+
+const comp = useRouteParams<ComponentType>('comp', '')
+
+const tabId = computed<number>(() => {
+  switch (comp.value) {
+    case 'oauth':
+      //If oauth is not enabled, redirect to profile
+      return get(oauthEnabled) ? 2 : 0
+    case 'settings':
+      return 1
+    case 'profile':
+    default:
+      return 0
+  }
+})
+
+const onTabChange = (tabid: number) => {
+  switch (tabid) {
+    case 1:
+      set(comp, 'settings')
+      break
+    case 2:
+      set(comp, 'oauth')
+      break
+    case 0:
+    default:
+      set(comp, 'profile')
+      break
+  }
+}
+
+</script>
 <template>
   <div id="account-template" class="app-component-entry">
     <TabGroup :selectedIndex="tabId" @change="onTabChange" as="div" class="container h-full m-auto mt-0 mb-10 duration-150 ease-linear text-color-foreground">
@@ -18,6 +66,12 @@
             </span>
           </tab>
 
+          <Tab v-if="oauthEnabled" v-slot="{ selected }" >
+            <span class="page-link" :class="{ 'active': selected }">
+             OAuth
+            </span>
+          </tab>
+
         </TabList>
       </div>
 
@@ -31,54 +85,16 @@
           <Settings />
         </TabPanel>
 
+        <TabPanel v-if="oauthEnabled" :unmount="false">
+          <OauthApps />
+        </TabPanel>
+
       </TabPanels>
 
     </TabGroup>
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouteParams } from '@vueuse/router'
-import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
-import { useStore } from '../../store'
-import Settings from './components/settings/Settings.vue'
-import Profile from './components/profile/Profile.vue'
-
-const { setPageTitle } = useStore()
-setPageTitle('Account')
-
-enum ComponentType{
-  Profile = 'profile',
-  Settings = 'settings'
-}
-
-const comp = useRouteParams<ComponentType>('comp', '')
-
-const tabId = computed<number>(() => {
-  switch (comp.value) {
-    case ComponentType.Settings:
-      return 1
-    case ComponentType.Profile:
-    default:
-      return 0
-  }
-})
-
-const onTabChange = (tabid : number) =>{
-  switch (tabid) {
-    case 1:
-      comp.value = ComponentType.Settings
-      break
-    case 0:
-    default:
-      comp.value = ComponentType.Profile
-      break
-  }
-}
-
-</script>
-
 <style lang="scss">
 #account-template{